<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style type="text/css">
        body,
        html {
            height: 100%;
        }
    </style>
    <!-- 引入 echarts.js -->
    <!-- script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script -->
    <!-- script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.8/echarts-gl.min.js"></script -->
    <script src="./echarts.min.js"></script>
    <script src="./echarts-gl.min.js"></script>
</head>

<!-- https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js -->
<!-- https://echarts.apache.org/zh/option.html#series-line.encode   -->

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:100%;height:90%;"></div>
    <script type="text/javascript">

        // 需要注释掉它
        // import * as echarts from 'echarts';
        // import 'echarts-gl';

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
            },
            visualMap: {
                calculable: true, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
                // https://echarts.apache.org/zh/option.html#visualMap-continuous.dimension
                dimension: 3, // 表示维度 3 映射到视觉元素上。(第4列)
                min: 10,
                max: 90,
                inRange: {
                    // 意思就是以这几个点作为基准，形成一种『渐变』的色带，数据映射到这个色带上。
                    color: [
                        '#1710c0',
                        '#0b9df0',
                        '#00fea8',
                        '#00ff0d',
                        '#f5f811',
                        '#f09a09',
                        '#fe0300',
                    ],
                },
            },
            grid3D: {
            },
            xAxis3D: {
                type: 'value',
                name: 'x:cate_x', // 坐标轴名称。不写也没事, 同时赋值之后可以在坐标轴上显示名称,
            },
            yAxis3D: {
                type: 'value',
                name: 'y:cate_y',
            },
            zAxis3D: {
                type: 'value',
                name: 'z:cate_z',
            },
            series: {
                type: 'scatter3D',
                dimensions: ['cate_x', 'cate_y', 'cate_z', 'cate_score'],
                // https://echarts.apache.org/zh/option.html#series-scatter.encode
                // 当使用 dimensions 给维度定义名称后，encode 中可直接引用名称，
                encode: {
                    x: 0, // 表示维度 0 映射到 x 轴。(第1列)
                    y: 1, // 表示维度 1 映射到 y 轴。(第2列)
                    z: 2, // 表示维度 2 映射到 z 轴。(第3列)
                },
                data: [
                    // 每一列称为一个『维度』。
                    // 这里分别是维度 0、1、2、3。
                    [1, 1, 1, 10],
                    [2, 2, 2, 20],
                    [3, 3, 3, 30],
                    [4, 4, 4, 40],
                    [5, 5, 5, 50],
                    [6, 6, 6, 60],
                    [7, 7, 7, 70],
                    [8, 8, 8, 80],
                    [9, 9, 9, 90],
                ],
                symbolSize: 8, // 标记的大小，(疑似为: 每个数据的图形大小)
                itemStyle: {
                    borderWidth: 0.3, // 描边线宽。为 0 时无描边。
                    borderColor: 'rgba(255,255,255,0.1)', // 图形的描边颜色。
                },
            },
        };

        option && myChart.setOption(option);

        function setValue(head_data, body_data) {
            option.xAxis3D.name = "x:" + head_data[option.series.encode.x];
            option.yAxis3D.name = "y:" + head_data[option.series.encode.y];
            option.zAxis3D.name = "z:" + head_data[option.series.encode.z];

            option.visualMap.min = body_data.map((arr) => { return arr[arr.length - 1]; }).reduce((a, b) => a < b ? a : b);
            option.visualMap.max = body_data.map((arr) => { return arr[arr.length - 1]; }).reduce((a, b) => a > b ? a : b);

            option.series.dimensions = head_data;
            option.series.data = body_data;

            myChart.setOption(option);
        }

    </script>
</body>

</html>